<script lang="ts" setup>
import { ref } from "vue";

const dataList = ref<any>([
    {
        name: "订单状态",
    },
    {
        name: "可见状态",
    },
]);

const modalVisible = ref(false);

const handleAction = (action: string) => {
    if (action === 'add') {
        modalVisible.value = true;
    }
};
</script>

<template>
    <umrp-container bg-color="#f2f2f2" height="100%" padding="16px" :gap="16">
        <umrp-breadcrumb :items="['系统管理', '字典分组']"></umrp-breadcrumb>
        <umrp-card>
            <umrp-table :data="dataList" :action-bar="true" @action="handleAction">
                <template #columns>
                    <umrp-table-column title="序号" data-index="id"></umrp-table-column>
                    <umrp-table-column title="分组名称" data-index="name"></umrp-table-column>
                    <umrp-table-column title="操作" slot-name="action" :width="120"></umrp-table-column>
                </template>
                <template #action>
                    <umrp-space :size="10">
                        <umrp-button type="primary" @click="modalVisible = true">编辑</umrp-button>
                        <umrp-popconfirm message="您确认删除么？">
                            <umrp-button type="danger">移除</umrp-button>
                        </umrp-popconfirm>
                    </umrp-space>
                </template>
                <template #name="{ record }">
                    <umrp-container direction="horizonal" :gap="10">
                        <umrp-icon name="right" :style="{ opacity: record.isLeaf ? 0 : 1 }"></umrp-icon>
                        <umrp-text>{{ record.name }}</umrp-text>
                    </umrp-container>
                </template>
                <template #icon>
                    <umrp-image :width="32" :height="32"></umrp-image>
                </template>
            </umrp-table>
        </umrp-card>
        <umrp-modal v-model:visible="modalVisible" :width="500">
            <umrp-container padding="24px 0">
                <umrp-form>
                    <umrp-form-item label="分组名称">
                        <umrp-input></umrp-input>
                    </umrp-form-item>
                </umrp-form>
            </umrp-container>
        </umrp-modal>
    </umrp-container>
</template>